<template>
<div>
  <h3 class="title">云手机体验质量评测APP-平台信息</h3>
  <el-select v-model="value" placeholder="请选择硬件信息" @change="infoChange" style="margin-left: 10px">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
  <h4 class="liltitle" v-show="value==='CPU'">云手机体验质量评测APP-CPU信息</h4>
  <h4 class="liltitle" v-show="value==='GPU'">云手机体验质量评测APP-GPU信息</h4>
  <h4 class="liltitle" v-show="value==='RAM'">云手机体验质量评测APP-RAM信息</h4>
  <h4 class="liltitle" v-show="value==='ROM'">云手机体验质量评测APP-ROM信息</h4>
  <el-table
      class="CpuData"
      :data="CpuData"
      :header-cell-style="{background:'lightblue',color:'#262626',}"
      border
      v-show="value==='CPU'"
      style="width: 68%; margin: 10px auto;"
  >
    <el-table-column
        prop="adminName"
        label="用户名称"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="platformName"
        label="平台名称"
    />
    <el-table-column
        prop="cores"
        label="核心数"
        width="220"
    >
    </el-table-column>
    <el-table-column
        prop="time"
        label="测评时间"
        width="220"
    >
    </el-table-column>
  </el-table>

  <el-table
      class="GpuData"
      :data="GpuData"
      :header-cell-style="{background:'lightblue',color:'#262626',}"
      border
      v-show="value==='GPU'"
      style="width: 68%; margin: 10px auto;"
  >
    <el-table-column
        prop="adminName"
        label="用户名称"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="platformName"
        label="平台名称"
        width="120"
    />
    <el-table-column
        prop="gpuVendor"
        label="GPU供应商"
        width="120"
    >
    </el-table-column>
    <el-table-column
        prop="gpuRender"
        label="GPU渲染器"
        width="150"
    >
    </el-table-column>
    <el-table-column
        prop="gpuVersion"
        label="GPU版本"
    >
    </el-table-column>
    <el-table-column
        prop="time"
        label="测评时间"
        width="180"
    >
    </el-table-column>
  </el-table>

  <el-table
      class="RamData"
      :data="RamData"
      :header-cell-style="{background:'lightblue',color:'#262626',}"
      border
      v-show="value==='RAM'"
      style="width: 68%; margin: 10px auto;"
  >
    <el-table-column
        prop="adminName"
        label="用户名称"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="platformName"
        label="平台名称"
    />
    <el-table-column
        prop="availableRam"
        label="可用内存"
        width="220"
    >
    </el-table-column>
    <el-table-column
        prop="totalRam"
        label="总内存"
        width="320"
    >
    </el-table-column>
    <el-table-column
        prop="time"
        label="测评时间"
        width="220"
    >
    </el-table-column>
  </el-table>

  <el-table
      class="RomData"
      :data="RomData"
      :header-cell-style="{background:'lightblue',color:'#262626',}"
      border
      v-show="value==='ROM'"
      style="width: 68%; margin: 10px auto;"
  >
    <el-table-column
        prop="adminName"
        label="用户名称"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="platformName"
        label="平台名称"
    />
    <el-table-column
        prop="availableRom"
        label="可用硬盘/储存"
        width="220"
    >
    </el-table-column>
    <el-table-column
        prop="totalRom"
        label="总硬盘/储存"
        width="320"
    >
    </el-table-column>
    <el-table-column
        prop="time"
        label="测评时间"
        width="220"
    >
    </el-table-column>
  </el-table>
<!--此处 :current-page.sync="currentPage"  使每次切换成某个硬件时将页码ui重置为第一页-->
  <el-pagination
      style="margin-left: 30px;  margin-top: 10px; text-align: center"
      background
      :current-page.sync="currentPage"
      layout="total, prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      v-show="this.value"
      @current-change="handleCurrentChange">
  </el-pagination>
</div>
</template>

<script>
import axios from "axios";
import ip from "@/components/ip";

export default {
  name: "info",
  data(){
    return{
      InfoData: null,
      CpuData: null,
      GpuData: null,
      RamData: null,
      RomData: null,
      total: null,
      currentPage:1,
      pageSize: 5,
      options: [{
        value: 'CPU',
        label: 'CPU'
      }, {
        value: 'GPU',
        label: 'GPU'
      }, {
        value: 'RAM',
        label: 'RAM'
      }, {
        value: 'ROM',
        label: 'ROM'
      }],
      value: ''
    }
  },
  methods:{
    CPU(currentPage){
      axios.get(ip+"/cpu/page?current="+currentPage+"&&size="+this.pageSize).then(res=>{
        this.CpuData=res.data.cpuList
        this.total=res.data.total
      })
    },
    GPU(currentPage){
      axios.get(ip+"/gpu/page?current="+currentPage+"&&size="+this.pageSize).then(res=>{
        this.GpuData=res.data.gpuList
        this.total=res.data.total
      })
    },
    RAM(currentPage){
      axios.get(ip+"/ram/page?current="+currentPage+"&&size="+this.pageSize).then(res=>{
        this.RamData=res.data.ramList
        this.total=res.data.total
      })
    },
    ROM(currentPage){
      axios.get(ip+"/rom/page?current="+currentPage+"&&size="+this.pageSize).then(res=>{
        this.RomData=res.data.romList
        this.total=res.data.total
      })
    },
    handleCurrentChange(val) {
      console.log(val)
      // 处理分页点击
      if (this.value === 'CPU') {
        this.CPU(val)
      }
      else if (this.value === 'GPU') {
        this.GPU(val)
      }
      else if (this.value === 'RAM') {
        this.RAM(val)
      }
      else {
        this.ROM(val)
      }
    },
    infoChange() {
      this.currentPage = 1
      console.log(this.currentPage)
      if (this.value === 'CPU') {
        this.CPU(this.currentPage)
      }
      else if (this.value === 'GPU') {
        this.GPU(this.currentPage)
      }
      else if (this.value === 'RAM') {
        this.RAM(this.currentPage)
      }
      else {
        this.ROM(this.currentPage)
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.title {
  font-size: 26px;
  margin: 5px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.liltitle {
  font-size: 18px;
  margin: 5px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
</style>
